// 1. 按钮样式
::v-deep .screen-btn {
  color: #3DE7C9 !important;
  background-color: rgba(61, 231, 201, 0.1) !important;
  border: 1px solid #3DE7C9 !important;
  transition: all 0.3s;

  &.active {
    background-color: rgba(61, 231, 201, 0.3) !important;
    box-shadow: 0 0 8px rgba(61, 231, 201, 0.5) !important;
  }
}

// 2. 表单标签样式
::v-deep .el-form-item__label {
  color: #3DE7C9 !important;
  font-size: 13px;
}

// 3. 普通输入框样式
::v-deep .el-input {
  background-color: transparent !important;

  &__inner {
    color: white !important;
    background-color: transparent !important;
    border-color: #3DE7C9 !important;

    &::placeholder {
      color: rgba(255, 255, 255, 0.7) !important;
    }
  }
}

// 4. 日期选择器输入框样式
::v-deep {
  // 4.1 基础输入框样式（适配所有日期选择器类型）
  .el-date-editor {
    background-color: transparent !important;
    border-color: #3DE7C9 !important;

    .el-input,
    .el-input__inner {
      background-color: transparent !important;
      color: white !important;
      border-color: #3DE7C9 !important;

      &::placeholder {
        color: rgba(255, 255, 255, 0.7) !important;
      }
    }

    .el-range-separator {
      color: #3DE7C9 !important;
    }

    .el-input__clear {
      color: rgba(255, 255, 255, 0.7) !important;
    }

  }

  // 4.2 适配 daterange 输入框
  .el-date-editor--daterange {
    .el-range-input {
      background-color: transparent !important;
      color: white !important;
      border-color: #3DE7C9 !important;

      &::placeholder {
        color: rgba(255, 255, 255, 0.7) !important;
      }
    }
  }

  // 4.3 适配 datetimerange 输入框
  .el-date-editor--datetimerange {
    .el-range-input {
      background-color: transparent !important;
      color: white !important;
      border-color: #3DE7C9 !important;

      &::placeholder {
        color: rgba(255, 255, 255, 0.7) !important;
      }
    }
  }

}


// 5. 表格样式调整
::v-deep .el-table {
  // 强制表格整体及所有子容器背景透明
  color: #FFF;
  background-color: #FFF !important;
  border-color: rgba(61, 231, 201, 0.5) !important;

  // 覆盖表格内部所有可能的白色背景容器
  .el-table__header-wrapper,
  .el-table__body-wrapper,
  .el-table__footer-wrapper,
  .el-table__fixed,
  .el-table__fixed-right {
    background-color: #000 !important;
  }

  // 表头样式
  .el-table__header-row {
    background-color: #000 !important;

    th {
      // 表头排序图标
      .caret-wrapper {
        color: rgba(61, 231, 201, 0.7) !important;
      }
    }

  }

  // 表体行与单元格
  .el-table__body-row {
    // 解决行背景白色问题
    &, & > td {
      background-color: #000 !important;
    }

    // 行hover效果
    &:hover > td {
      background-color: #000 !important;
    }

    td {
      color: rgba(255, 255, 255, 0.9) !important;
      border-color: rgba(61, 231, 201, 0.5) !important;
    }
  }

  // 斑马纹样式（如果启用）
  .el-table__row--striped {
    td {
      background-color: #000 !important;
    }
  }

  // 解决固定列边框和背景问题
  .el-table__fixed::before,
  .el-table__fixed-right::before,
  .el-table::before {
    background-color: #000 !important;
  }

  // 空表格状态
  .el-table__empty-block {
    background-color: #000 !important;

    .el-table__empty-text {
      color: rgba(255, 255, 255, 0.7) !important;
    }
  }

  tr {
    background-color: #000 !important;

    td.el-table__cell {
      background-color: rgba(61, 231, 201, 0.2) !important;
      border-bottom: 1px solid #666666;
    }
  }

  tr.hover-row>td.el-table__cell {
    background-color: rgba(61, 231, 201, 0.2) !important;
    border: none !important;
  }

  th.el-table__cell {
    color: #FFF !important;
    font-weight: 800;
    background-color: rgba(67, 148, 228, 0.3) !important;
  }

}

// 6. 单选按钮组样式调整
::v-deep .el-radio-group {
  .el-radio-button__inner {
    color: #3DE7C9 !important;
    background-color: rgba(61, 231, 201, 0) !important;
    border-color: #3DE7C9 !important;
  }
  .el-radio-button__orig-radio:checked+.el-radio-button__inner {
    color: #000 !important;
    background-color: rgba(61, 231, 201, 0.9) !important;
  }
}

// 7. 环形进度条样式调整
::v-deep .el-progress__text {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #FFF !important;
}

::v-deep .el-progress-circle__track,
::v-deep .el-progress-circle__path {
  stroke-width: 6px !important; /* 减小线宽，给文字留出空间 */
}


// 8. 表格滚动条样式调整
::v-deep .el-table {
  /* 嵌套一层，增强权重 */
  .el-table__body-wrapper,
  .el-table__header-wrapper {
    /* WebKit 内核浏览器滚动条 */
    &::-webkit-scrollbar {
      width: 6px !important;
      height: 6px !important;
      display: block !important; /* 强制显示，部分场景可能被隐藏 */
    }

    /* 轨道 */
    &::-webkit-scrollbar-track {
      background: #f5f5f5 !important;
      border-radius: 3px !important;
    }

    /* 滑块 */
    &::-webkit-scrollbar-thumb {
      background: #dcdfe6 !important;
      border-radius: 3px !important;
      transition: background 0.2s !important;
    }

    /* 滑块 hover */
    &::-webkit-scrollbar-thumb:hover {
      background: #c0c4cc !important;
    }

    /* Firefox 兼容 */
    //scrollbar-width: thin !important;
    scrollbar-color: rgba(67, 148, 228, 0.6) rgba(67, 148, 228, 0.3) !important;
  }
}
